import React, { Component } from 'react';
import styles from '@/pages/boss/center/BossInfo/style.less';
import { Button, Divider, Form, Icon, Input, message, Radio, Upload } from 'antd';
import config from '@/config';
import { saveBossUser } from '@/services/boss';
import { withRouter } from 'umi';

class JoinForm extends Component<any, any> {
  state = {
    resumePath: '',
  };

  handleSubmit = (e: any) => {
    e.preventDefault();
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        const hide = message.loading('正在投递', 0);
        saveBossUser({
          ...this.state,
          ...values,
          bossId: this.props.boss.id,
        })
          .then(value => {
            hide();
            message.success('投递成功');
            this.props.history.push(`/boss/result`);
          })
          .catch(err => {
            hide();
            console.log(err);
            message.error('投递失败');
          });
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 8 },
    };

    const that = this;
    const fileItemLayout = {
      labelCol: { span: 0 },
      wrapperCol: { span: 12 },
    };
    const { Dragger } = Upload;

    const fileProps = {
      name: 'file',
      multiple: false,
      action: `${config.apiUrl}/adminApi/file/fileUpload`,
      onChange(info: any) {
        const { status } = info.file;
        if (status === 'done') {
          that.setState({
            resumePath: info.file.response,
          });
          message.success(`${info.file.name} 上传成功`);
        } else if (status === 'error') {
          message.error(`${info.file.name} 上传失败`);
        }
      },
    };

    return (
      <div>
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <p className={styles.mainTitle}>基本信息</p>
          <div className={styles.padContent}>
            <Form.Item {...formItemLayout} label="姓名">
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: '请输入您的姓名',
                  },
                ],
              })(<Input placeholder="请输入您的姓名" />)}
            </Form.Item>
            <Form.Item {...formItemLayout} label="手机号">
              {getFieldDecorator('phone', {
                rules: [
                  {
                    required: true,
                    message: '请输入您的手机号',
                    pattern: /^1[0-9]{10}$/,
                  },
                ],
              })(<Input placeholder="请输入正确的手机号" />)}
            </Form.Item>

            <Form.Item label="是否同意调剂">
              {getFieldDecorator('adjustState', {
                initialValue: '1',
                rules: [
                  {
                    required: true,
                    message: '请选择是否同意调剂',
                  },
                ],
              })(
                <Radio.Group>
                  <Radio.Button value="1">是</Radio.Button>
                  <Radio.Button value="0">否</Radio.Button>
                </Radio.Group>,
              )}
            </Form.Item>
          </div>

          <p className={styles.mainTitle}>附件简历</p>
          <div className={styles.padContent}>
            <Form.Item label="" {...fileItemLayout}>
              <Dragger {...fileProps}>
                <p className="ant-upload-drag-icon">
                  <Icon type="cloud-upload" />
                </p>
                <p className="ant-upload-text">将你的简历拖拽至此处</p>
                <p className="ant-upload-hint">
                  支持格式：pdf、doc、docx、ppt、pptx、png、jpg、jpeg
                </p>
              </Dragger>
            </Form.Item>
          </div>
          <p>
            注：每人限报一个岗位，须按照要求如实、完整填写个人信息，简历中须包含一寸标准证件照。
          </p>

          <Divider />

          <Form.Item
            wrapperCol={{
              span: 12,
              offset: 12,
            }}
          >
            <Button
              type="primary"
              style={{
                backgroundColor: '#895C32',
                borderColor: '#895C32',
              }}
              htmlType="submit"
            >
              投递
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create({ name: 'JoinForm' })(withRouter(JoinForm));
